<style>
.groupCompany {
  padding: 10px;
  min-height: 600px;
}
.smoke-top-title {
  margin-bottom: 10px;
  margin-left: 4px;
}
.smoke-count-item {
  border: 1px solid #666;
  border-radius: 5px;
  max-width: 200px;
  padding: 15px 0 10px;
  margin-right: 1.5vw;
  text-align: center;
  cursor: pointer;
}
.smoke-count-item > .smoke-p-title {
  font-size: 22px;
  line-height: 1;
}
.smoke-count-item > .smoke-p-desc {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}
.color-red {
  color: #e44e1d;
  border-color: #e44e1d;
}
.color-gold {
  color: #dbd148;
  border-color: #dbd148;
}
.color-orange {
  color: #eba035;
  border-color: #eba035;
}
.color-blue {
  color: #3089ff;
  border-color: #3089ff;
}
</style>

<template>

  <div class="groupCompany">
    <div>
      <Row style="padding:10px 0">
        <Col
          span="12"
          style="padding-right:5px"
        >
        <Card>
          <div class="smoke-top-title">未确认告警({{earlyAlarmCount+fireAlarmCount+malfunctionCount}}个)</div>
          <div style="text-align:center;">
            <Row>
              <Col span="8">
              <div class="smoke-count-item color-red">
                <div class="smoke-p-title color-red"> {{fireAlarmCount}}个</div>
                <div class="smoke-p-desc">未确认火警数</div>
              </div>
              </Col>
              <Col span="8">
              <div class="smoke-count-item color-gold">
                <div class="smoke-p-title color-gold"> {{malfunctionCount}}个</div>
                <div class="smoke-p-desc">未确认故障数</div>
              </div>
              </Col>
              <Col span="8">
              <div class="smoke-count-item color-orange">
                <div class="smoke-p-title color-orange"> {{earlyAlarmCount}}个</div>
                <div class="smoke-p-desc">未确认预警数</div>
              </div>
              </Col>
            </Row>
          </div>
        </Card>
        </Col>
        <Col
          span="12"
          style="padding-left:5px"
        >
        <Card>
          <div class="smoke-top-title">联网单位</div>
          <div style="text-align:center">
            <div class="smoke-count-item color-blue">
              <div class="smoke-p-title color-blue"> {{gcCount}}个</div>
              <div class="smoke-p-desc">管辖联网单位总数</div>
            </div>
          </div>
        </Card>
        </Col>
      </Row>
    </div>
    <div style="background-color:#fff;padding:10px 10px 0;border-radius:4px;position:relative;">

      <Form
        ref="searchForm"
        :model="searchForm"
        value=true
        inline
      >
        <Row>
          <Form-item>
            <Cascader
              :data="areasBuildingsCascader"
              v-model="searchForm.areaGcbd"
              :filterable="true"
              transfer
              placeholder="联网单位"
            ></Cascader>
          </Form-item>
          <Form-item>
            <Select
              v-model="searchForm.alarmType"
              placeholder="请选择"
              style="width:120px;"
            >
              <Option
                v-for="item in alarmTypeCombo"
                :value="item.key"
                :key="item.value"
              >{{ item.value }}</Option>
            </Select>
          </Form-item>
          <Form-item>
            <Select
              v-model="searchForm.alarmStat"
              placeholder="请选择"
              style="width:120px;"
            >
              <Option
                v-for="item in alarmStatCombo"
                :value="item.key"
                :key="item.value"
              >{{ item.value }}</Option>
            </Select>
          </Form-item>
          <Form-item>

            <DatePicker
              type="date"
              placeholder="开始日期"
              style="width: 200px"
              v-model="searchForm.startTime"
            ></DatePicker>

          </Form-item>
          <Form-item>

            <DatePicker
              type="date"
              placeholder="结束时间"
              style="width: 200px"
              v-model="searchForm.endTime"
            ></DatePicker>

          </Form-item>
          <Button
            type="primary"
            icon="ios-search"
            @click="doSearchTableList"
          >搜 索</Button>
          <Button
            type="warning"
            icon="ios-color-wand"
            @click="resetSearch"
          >重置</Button>
        </Row>
      </Form>
    </div>
    <!--table-->
    <Row>
      <Table
        stripe
        size="small"
        :columns="tableColums"
        :data="tableData"
      ></Table>
    </Row>
    <Row>
      <Page
        :total="total"
        :current="currentPage"
        @on-change="changeCurrentPage"
        show-total
        style="float:right;margin-top:10px"
      ></Page>
    </Row>
    <!--管理-->
    <alarmForm
      :modalShow="formShow"
      :modalFormTitle="formTitle"
      :parentForm="parentForm"
      @listenModalForm="hideModel"
      @refreshTableList="getTableList"
    ></alarmForm>
    <!--是否删除框-->
    <Modal
      v-model="delModal"
      width="360"
    >
      <p
        slot="header"
        style="color:#f60;text-align:center"
      >
        <Icon type="information-circled"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>是否继续删除？</p>
      </div>
      <div slot="footer">
        <Button
          type="error"
          size="large"
          long
          :loading="btnLoading"
          @click="comfirmDel"
        >删除</Button>
      </div>
    </Modal>
    <audio
      id="audioPlay"
      src="static/119.ogg"
      controls="controls"
      style="display:none;"
    ></audio>
  </div>

</template>

<script>
import Cookies from "js-cookie";
import {
  getAlarmPagedList,
  areasBuildingsCascader,
  alarmCount
} from "@/api/getData";
import { clearObj, formatDate } from "@/libs/util";
import alarmForm from "./alarmForm.vue";
import expandRow from "./table-expand.vue";
export default {
  name: "home",
  components: {
    alarmForm,
    expandRow
  },
  data() {
    return {
      tableColums: [
        {
          type: "expand",
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            });
          }
        },
        {
          align: "center",
          title: "联网名称",
          key: "groupName"
        },
        {
          align: "center",
          title: "子单位",
          key: "bdName"
        },
        {
          align: "center",
          title: "设备名称",
          key: "devName"
        },
        {
          align: "center",
          title: "设备地址",
          key: "bdAddr"
        },
        {
          align: "center",
          title: "报警类型",
          key: "alarmType",
          render: (h, params) => {
            let alarmTypeTxt =
              this.alarmTypeCombo.find(a => a.key == params.row.alarmType)
                .value;
            let alarmTypeColor =
              this.alarmTypeColorList.find(a => a.key == params.row.alarmType)
                .value;
            return h(
              "span",
              {
                style: {
                  color: alarmTypeColor
                }
              },
              alarmTypeTxt
            );
          }
        },
        {
          align: "center",
          title: "报警内容",
          key: "alarmDetail"
        },
        {
          align: "center",
          title: "报警时间",
          key: "alarmDate"
        },

        {
          align: "center",
          title: "报警状态",
          key: "alarmStat",
          render: (h, params) => {
            let alarmStatTxt = this.alarmStatCombo.find(
              a => a.key == params.row.alarmStat
            ).value;
            let alarmStatColor = this.alarmStatColorList.find(
              a => a.key == params.row.alarmStat
            ).value;
            return h(
              "span",
              {
                style: {
                  color: alarmStatColor
                }
              },
              alarmStatTxt
            );
          }
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            let actions = [];

            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.manageItem(params.row);
                    }
                  }
                },
                "管理"
              )
            );
            return h("div", actions);
          }
        }
      ],
      tableData: [],
      total: 0,
      currentPage: 1,
      formShow: false,
      formTitle: "添加联网单位",
      parentForm: {},
      delModal: false,
      delId: "", //删除的Id
      btnLoading: false,
      searchForm: {
        dep_id: 0,
        gc_id: 0,
        alarmType: 0,
        alarmStat: 0,
        startTime: "",
        endTime: "",
        rows: 10,
        page: 1,
        areaGcbd: []
      },
      areasBuildingsCascader: [],
      alarmTypeCombo: [
        { key: 0, value: "告警类型" },
        { key: 1, value: "预警" },
        { key: 2, value: "火警" },
        { key: 3, value: "故障" },
        { key: 4, value: "拆除报警" },
        { key: 5, value: "其他" }
      ],
      alarmTypeColorList: [
        { key: 0, value: "#495060" },
        { key: 1, value: "#f16700" },
        { key: 2, value: "#e4393c" },
        { key: 3, value: "#00b711" },
        { key: 4, value: "#d3adf7" },
        { key: 5, value: "#495060" }
      ],
      alarmStatCombo: [
        { key: 0, value: "确认状态" },
        { key: 1, value: "未确认" },
        { key: 2, value: "已确认" }
      ],
      alarmStatColorList: [
        { key: 1, value: "#f54d50" },
        { key: 2, value: "#5cb85c" }
      ],
      earlyAlarmCount: 0,
      fireAlarmCount: 0,
      malfunctionCount: 0,
      gcCount: 0,
      mysocket: null
    };
  },
  created() {},
  mounted() {
    this.getAreasBuildingsCascader();
    this.getAlramCount();
    this.getTableList();
    this.socketConn();
  },
  methods: {
    async getAlramCount() {
      let res = await alarmCount({});
      if (res.code == 0) {
        this.gcCount = res.data.gc;
        if (res.data.alarm.find(a => a.alarmType == 1)) {
          this.earlyAlarmCount = res.data.alarm.find(
            a => a.alarmType == 1
          ).al_count;
        }
        if (res.data.alarm.find(a => a.alarmType == 2)) {
          this.fireAlarmCount = res.data.alarm.find(
            a => a.alarmType == 2
          ).al_count;
        }
        if (res.data.alarm.find(a => a.alarmType == 3)) {
          this.malfunctionCount = res.data.alarm.find(
            a => a.alarmType == 3
          ).al_count;
        }
      }
    },
    async getAreasBuildingsCascader() {
      let res = await areasBuildingsCascader({ allData: false });
      if (res.code == 0) {
        this.areasBuildingsCascader = res.data;
      }
    },
    resetSearch() {
      this.searchForm.alarmType = 0;
      this.searchForm.alarmStat = 0;
      this.searchForm.start = "";
      this.searchForm.end = "";
      this.searchForm.areaGcbd = [];
    },
    doSearchTableList() {
      this.currentPage = 1;
      this.getTableList();
    },
    async getTableList() {
      this.searchForm.page = this.currentPage - 1;
      if (this.searchForm.areaGcbd.length == 0) {
        this.searchForm.dep_id = 0;
        this.searchForm.gc_id = 0;
      } else if (this.searchForm.areaGcbd.length == 1) {
        this.searchForm.dep_id = this.searchForm.areaGcbd[0];
        this.searchForm.gc_id = 0;
      } else if (this.searchForm.areaGcbd.length == 2) {
        this.searchForm.dep_id = this.searchForm.areaGcbd[0];
        this.searchForm.gc_id = this.searchForm.areaGcbd[1];
      }
      const params = this.searchForm;
      let startDate = this.searchForm.startTime;
      let endDate = this.searchForm.endTime;
      if (startDate != "") {
        params.start = formatDate(startDate, "yyyy-MM-dd hh:mm:ss");
      } else {
        params.start = "";
      }
      if (endDate != "") {
        params.end = formatDate(endDate, "yyyy-MM-dd 23:59:59");
      } else {
        params.end = "";
      }
      const result = await getAlarmPagedList(params);

      if (result.code == 0) {
        let res = result.data;
        this.total = res.total;
        this.tableData = res.data;
      }
    },
    changeCurrentPage(num) {
      this.currentPage = num;
      this.getTableList();
    },
    delItem(Id) {
      this.delId = Id;
      this.delModal = true;
    },
    async comfirmDel() {
      this.btnLoading = true;
      try {
        const res = await delGroupCompany({ id: this.delId });
        if (res.code == 0) {
          this.getTableList();
          this.delModal = false;
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
      this.btnLoading = false;
    },
    hideModel() {
      this.formShow = false;
    },
    manageItem(row) {
      this.parentForm = JSON.parse(JSON.stringify(row));
      this.formTitle = "告警处理";
      this.formShow = true;
    },
    socketConn() {
      let loginName = Cookies.get("loginName");
      //if (this.mysocket!=null&&this.mysocket.readyState === this.mysocket.OPEN) {
      //        return;
      //} 无效果，切换页面后无法保持连接
      this.mysocket = new WebSocket(
        "ws://xf.ctjt.cn:8888/websocket/" + loginName
      );
      //打开事件
      this.mysocket.onopen = () => {
        console.log("Socket 已打开");
      };
      //获得消息事件
      this.mysocket.onmessage = msg => {
        console.log(msg.data);
        var obj = JSON.parse(msg.data);
        console.log(obj.alarmData);
        if (obj.msgType == "alarm") {
          this.$Notice.warning({
            title: obj.alarmData,
            desc: "设备：" + obj.deviceName + ",地址：" + obj.addr,
            duration: 0
          });
          if (obj.rawData == "020100") {
            let audioPlay = document.getElementById("audioPlay");

            audioPlay.play();
          }
          this.doSearchTableList();
          this.getAlramCount();
        }
      };
      //关闭事件
      this.mysocket.onclose = () => {
        console.log("Socket已关闭");
      };
      //发生了错误事件
      this.mysocket.onerror = () => {
        console.log("Socket发生了错误");
      };
      this.$router.afterEach(() => {
        this.mysocket.close();
      });
    }
  }
};
</script>
